<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>客户端1</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

    <style>
        .mt_4 {
            margin-top: 4px;
        }

        .mt_20 {
            margin-top: 20px;
        }

        .one .panel-body {
            padding: 0;
        }

        .panel-body #content {
            border: none;
            outline: none;
            font-size: 16px;
            width: 100%;
            height: 200px;
            padding: 20px;
        }



        #btn_send {
            width: 80px;
        }

        body,
        html {
            margin: 0 auto;
            padding: 0;
            height: 100%;
        }


        .form-control {}
    </style>
</head>

<body>

    <div class="container mt_20" id="app">
        <div class="panel panel-default one">
            <div class="panel-heading">小李,工号1002</div>
            <div class="panel-body">
                <div id="content">
                    <div v-for="item in content">
                        <span>{{item.client}} : {{item.msg}}</span>
                    </div>
                </div>
            </div>
            <div class="panel-footer send_container">

                <input id="sendMsg" class="form-control inline" style="display: inline;" type="text" v-model="msg" />
                <input id="toUuid" class="form-control mt_4 inline" style="display: inline;" type="text"
                    v-model="toUuid" />
                <button id="btn_send" class="btn btn-success mt_4" @click="send">发送</button>
            </div>
        </div>

    </div>


    <!-- 首先引入 socket.io 客户端脚本-->
    <!-- <script src="/socket.io/socket.io.js"></script> -->
    <script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
    <script type="text/javascript">

        var uuid = "1002";

        var socket = io.connect('http://47.103.36.143:8888/one', { query: "uuid=" + uuid }); //连接服务端，因为本机使用localhost 所以connect(url)中url可以不填或写 http://localhost
        // 监听 receiveMsg 事件，用来接收其他客户端推送的消息
        socket.on("receiveMsg", function (data) {
            console.log(data, "==========receiveMsg.data======");
            app.content.push(data);// += data.client + ":" + data.msg + "\r\n";
        });


        var app = new Vue({
            el: '#app',
            data: {
                uuid: uuid,
                content: [],
                msg: '',
                toUuid: 'all'
            },
            methods: {
                send() {
                    var that = this;
                    var data = {
                        client: "小李",
                        msg: that.msg,
                        uuid: that.toUuid //发给谁
                    };
                    socket.emit("sendMsg", data);
                }
            }
        })

    </script>

</body>

</html>